import "./inde.css";
import TitleBar from "../../components/titleBar";
import { PlusCircleFilled } from "@ant-design/icons";

import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
import { useEffect, useState } from "react";
import interactionPlugin from "@fullcalendar/interaction";
import { Calendar } from "@fullcalendar/core";
import timeGridPlugin from "@fullcalendar/timegrid";
import { v4 as uuid } from "uuid";
function Pinlv() {
  const [events, setEvents] = useState<any>([]);
  //   事件
  const handleSelect = (info: any) => {
    const { start, end } = info;
    const eventNamePrompt = prompt("Enter, event name");
    if (eventNamePrompt) {
      setEvents([
        ...events,
        {
          start,
          end,
          title: eventNamePrompt,
          id: uuid(),
        },
      ]);
    }
  };
  const EventItem = ({ info }: any) => {
    const { event } = info;
    return (
      <div
        className="homeContent"
        style={{
          backgroundColor: "#" + Math.random().toString(16).substr(2, 6),
          width: "100%",
          padding: "10px 0",
        }}
      >
        <p>{event.title}</p>
      </div>
    );
  };

  useEffect(() => {
    let el = document.getElementById("fullcalendar");
    const calendar = new Calendar(el!, {
      plugins: [timeGridPlugin],
      initialView: "timeGridWeek",
      headerToolbar: {
        left: "prev,next",
        center: "title",
        right: "timeGridWeek,timeGridDay", // user can switch between the two
      },
    });
    calendar.render()
  }, []);
  //   jquery
  return (
    <div className="pinlv">
      <TitleBar
        Icon={PlusCircleFilled}
        title="使用频率"
        callback={() => console.log(1)}
      ></TitleBar>
      
      <div id="fullcalendar"></div>
    </div>
  );
}

export default Pinlv;
